<template>
  <div class="container-set">
      <div class="general-contain">
        <tiny-form label-width="150px" label-position="left" class="company-form">
          <tiny-form-item label="公司名称" class="company-form">
              <tiny-input v-model="data.name"></tiny-input>
          </tiny-form-item>
          <tiny-form-item label="公司简称" class="company-form">
            <tiny-input v-model="data.short_name"> </tiny-input>
          </tiny-form-item>
          <tiny-form-item label="法人姓名" class="company-form">
              <tiny-input v-model="data.legal_person"></tiny-input>
          </tiny-form-item>
          <tiny-form-item label="联系电话" class="company-form">
              <tiny-input v-model="data.telephone"></tiny-input>
          </tiny-form-item>
          <tiny-form-item label="公司地址" class="company-form">
              <tiny-input v-model="data.address"></tiny-input>
          </tiny-form-item>
          <tiny-form-item label="收货地址" class="company-form">
              <tiny-input v-model="data.delivery_address"></tiny-input>
          </tiny-form-item>
          <tiny-form-item label="邮政编码" class="company-form">
              <tiny-input v-model="data.post_code"></tiny-input>
          </tiny-form-item>
          <tiny-form-item label="注册资本" class="company-form">
              <tiny-input v-model="data.registered_capital"></tiny-input>
          </tiny-form-item>
          <tiny-form-item label="银行账号" class="company-form">
              <tiny-input v-model="data.account"></tiny-input>
          </tiny-form-item>
          <tiny-form-item label="联行号" class="company-form">
              <tiny-input v-model="data.line_number"></tiny-input>
          </tiny-form-item>
          <tiny-form-item label="开户行名称" class="company-form">
              <tiny-input v-model="data.bank_name"></tiny-input>
          </tiny-form-item>
          <tiny-form-item class="general-btn">
            <tiny-button 
              v-permission="'company::update'"
              type="primary"
              native-type="submit"
              @click="handleSubmit"
               class="button"
            >
              确定
            </tiny-button>
          </tiny-form-item>
      </tiny-form>
      </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, onMounted, reactive, defineProps, defineEmits } from 'vue';
  import { TinyForm, TinyFormItem, TinyInput, TinyButton } from '@opentiny/vue'
  import { Company, updateCompany } from '@/api/company';
  import { TinyModal } from '@opentiny/vue';

  const props = defineProps({
    companyData: {
      type: Object as () => Company,
      required: true
    }
  });

  const emit = defineEmits<{
    (e: 'cancel'): void;
    (e: 'confirm'): void;
  }>();

  // 加载效果
  const data = reactive(props.companyData);

  // 校验规则
  const rulesType = {
    required: true,
    trigger: 'blur',
  };
  const rules = computed(() => {
    return {
      department: [rulesType],
      roleIds: [rulesType],
      employeeType: [rulesType],
      probationDate: [rulesType],
      probationDuration: [rulesType],
      protocolStart: [rulesType],
      protocolEnd: [rulesType],
      name: [rulesType],
      address: [rulesType],
      status: [rulesType],
    };
  });

  const handleCancel = () => {
    emit('cancel');
  };

  async function handleSubmit() {
    try {
      // 调用 updateCompany 函数进行数据更新
      const response = await updateCompany(data);
      console.log('更新成功', response);
      TinyModal.message({
        message: '公司信息更新成功',
        status: 'success'
      });
      emit('confirm');
    } catch (error) {
      TinyModal.message({
        message: '公司信息更新失败，请稍后重试',
        status: 'error'
      });
    }
  }
</script>

<style scoped lang="less">
.container-set {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0 auto;

    .general-contain {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 30px 0 10px 0;
    }
  }

  .general-btn {
    position: relative;
    margin: 20px auto; /* 上下外边距为 20px，左右自动居中 */
    text-align: center; /* 按钮文本居中，对于行内元素或行内块元素有效 */

    button {
      width: 100px;
      height: 36px;
      border-radius: 4px;
      margin: 0 5px; /* 按钮之间的左右间距为 5px */
    }
  }

  .company-form {
    padding: 0;
    margin: 0;
    margin-right: 10px;
  }
</style>